 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box{
				background-color: skyblue;
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div id="box">
		</div>
		<script type="text/javascript">
			//事件冒泡，由最开始的最具体的元素接受，然后逐级向上传播到不具体的节点
			//注意 IE9以上 和其他所有浏览器都支持冒泡
			var box = document.getElementById('box');
			box.onclick = function(){		//当前div
				box.innerHTML += 'box\n'
			}
			document.body.onclick = function(){ 	//body
				box.innerHTML += 'body\n'
			}
			document.documentElement.onclick = function(){		//html
				box.innerHTML += 'html\n'
			}
			document.onclick = function(){			//文档
				box.innerHTML += 'document\n'
			}
			window.onclick = function(){		//浏览器
				box.innerHTML += 'window\n'
			}
			
			
			//事件捕获 和事件冒泡相反，由最不具体的开始接受，到最具体的事件
		</script>
	</body>
</html>
